<template>
  <div style="" >
    <mt-header title="中国潮牌">
      <mt-button icon="back" slot="left"></mt-button>
      <router-link slot="right" to="/login">
      <mt-button >登录</mt-button>
      </router-link>
    </mt-header>

<div id="neirong" style="margin:8vw; padding:2vw; border:1px solid red;">
    <mt-field
      type="text"
      label="手机号"
      placeholder="请输入手机号"
      v-model="phone"
      :state="phoneState"
      @blur.native.capture="checkPhone()"
    ></mt-field>

    <mt-field
      type="text"
      label="用户名"
      placeholder="请输入用户名"
      v-model="name"
      :state="nameState"
      @blur.native.capture="checkName()"
    ></mt-field>

    <mt-field
      type="password"
      label="密码"
      placeholder="请输入密码"
      v-model="pwd"
      :state="pwdState"
      @blur.native.capture="checkPwd()"
    ></mt-field>

    <mt-field
      type="password"
      label="确认密码"
      placeholder="请再次输入密码"
      v-model="repwd"
      :state="repwdState"
      @blur.native.capture="checkrePwd()"
    ></mt-field>

    <mt-field
      type="text"
      label="邮箱"
      placeholder="请输入邮箱"
      v-model="email"
      :state="emailState"
      @blur.native.capture="checkEmail()"
    ></mt-field>

    <mt-button type="primary" size="large" @click="checkFrom"
      >快速注册</mt-button
    >
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      phone:"",
      phoneState:"",
      name: "", //绑定用户名输入框的值
      nameState: "", //绑定用户名的状态属性
      pwd: "",
      pwdState: "",
      repwd: "",
      repwdState: "",
      email:"",
      emailState:"",
    };
  },

  methods: {
    // 验证表单
    checkFrom() {
      this.checkName();
      this.checkPwd();
      this.checkrePwd();
      this.checkPhone();
      this.checkEmail();
      if(this.checkPhone()&&this.checkName()&&this.checkPwd()&&this.checkrePwd()&&this.checkEmail()){
        this.$router.push('/login')
      }
    },


    checkPhone() {
      // 手机号
      let reph = /^1[3-9]\d{9}$/;
      if (reph.test(this.phone)) {
        this.phoneState = "success";
        return true
      } else {
        this.phoneState = "error";
        return false
      }
    },
    checkName() {
      // 验证账号
      let reg = /^\w{6,15}$/;
      if (reg.test(this.name)) {
        this.nameState = "success";
        return true
      } else {
        this.nameState = "error";
        return false
      }
    },
    checkPwd() {
      // 验证密码
      let rep = /^\w{6}$/;
      if (rep.test(this.pwd)) {
        this.pwdState = "success";
        return true
      } else {
        this.pwdState = "error";
        return false
      }
    },
    checkrePwd() {
      // 验证密码
      let repg = /^\w{6}$/;
      if (repg.test(this.repwd) && this.pwd == this.repwd) {
        this.repwdState = "success";
        return true
      } else {
        this.repwdState = "error";
        return false
      }
    },
    checkEmail() {
      // 验证邮箱
      let ree = /^[1-9]\d{7,10}@qq\.com$/;
      if (ree.test(this.email)) {
        this.emailState = "success";
        return true
      } else {
        this.emailState = "error";
        return false
      }
    },
  },
};
</script>
<style lang="scss">
 
</style>
